<template>
	<view :class="className" class="ss-flex ss-row-between">
		<view class="title-box" >
			<view :style="{color:color,fontSize:fontSize + 'rpx',fontWeight:fontWeight}"><slot></slot></view>
			<view class="bg-class"></view>
		</view>
	</view>
</template>

<script setup>  
	defineProps({
		color:{
			type:String,
			default:"#222"
		},
		fontSize:{
			type:String,
			default:"28"
		},
		fontWeight:{
			type:String,
			default:"500"
		},
		className:{
			type:String,
			default:""
		}
		
	})
</script>

<style lang="scss">
	.title-box {
		position: relative;
		.bg-class {
			position: absolute;
			left: 0;
			bottom: 5rpx;
			width: 110rpx;
			height: 14rpx;
			background: linear-gradient( 90deg, $main-color 0%, rgba(51,214,94,0) 100%);
			border-radius: 7rpx 7rpx 7rpx 7rpx;
		}
	}
</style>